﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="bootstrap default admin template">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>List | Prince Admin Template</title>


        <!-- Start global css -->
        <link rel="stylesheet" href="../../assets/global/plugins/Waves/dist/waves.min.css"/>
        <link rel="stylesheet" href="../../assets/global/plugins/bootstrap/dist/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../../assets/icons_fonts/font-awesome/css/font-awesome.min.css"/>
        <!-- End global css -->

        <!-- Start page plugin css -->

        <!-- End page plugin css -->

        <!-- Start template global css -->
        <link href="../../assets/global/css/components.min.css" type="text/css" rel="stylesheet"/>
        <!-- End template global css -->

        <!-- Start layout css -->
        <link rel="stylesheet" href="../../assets/layouts/layouts_left_icon_menu/left_icon_menu_layout.min.css"/>
        <!-- End layout css -->

    <!-- Start favicon ico -->
    <link rel="icon" href="../../assets/favicon/prince.ico" type="image/x-icon"/>
    <link rel="icon" type="image/png" sizes="192x192" href="../../assets/favicon/prince-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="../../assets/favicon/prince-180x180.png">
    <!-- End favicon ico -->

    </head>
    <body class="nav-small">
    <div class="container body">
        <div class="main_container">
            <!-- Start header -->
            <!-- Start Loader -->
<div class="page-loader">
    <div class="preloader loading">
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
        <span class="slice"></span>
    </div>
</div>
<!-- End Loader -->

<!-- Start Scroll Top -->
<a href="javascript:" id="scroll" style="display: none;"><span></span></a>
<!-- End Scroll Top -->

<!-- start Left Menu-->
<div class="col-md-3 left_color">
    <div class="left_color scroll-view">
        <div class="navbar nav_title">
            <a href="index.html" class="medium-logo">
                <img src="../../assets/global/images/prince_logo.png" alt="medium-logo">
            </a>
            <a href="index.html" class="small-logo">
                <img src="../../assets/global/images/prince_logo2.png" alt="small-logo">
            </a>
        </div>

        <div class="clearfix"></div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-home"></i>Dashboard <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="index.html">Dashboard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-desktop"></i>Basic UI Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="accordions.html">Accordions</a></li>
                            <li> <a class="waves-effect waves-light" href="buttons.html">Buttons</a></li>
                            <li> <a class="waves-effect waves-light" href="dropdowns.html">Dropdowns</a></li>
                            <li> <a class="waves-effect waves-light" href="modals.html">Modals</a></li>
                            <li> <a class="waves-effect waves-light" href="modals_animation.html">Modals Animation</a></li>
                            <li><a class="waves-effect waves-light" href="list.html">List</a></li>
                            <li> <a class="waves-effect waves-light" href="progressbar.html">Progress bar</a></li>
                            <li> <a class="waves-effect waves-light" href="tabs.html">Tabs</a></li>
                            <li> <a class="waves-effect waves-light" href="typography.html">Typography</a></li>
                            <li> <a class="waves-effect waves-light" href="tooltip_popover.html">Tooltips & Popover</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cube"></i>Advanced Elements <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="alerts.html">Alerts</a></li>
                            <li> <a class="waves-effect waves-light" href="custom_scroll.html">Custom scroll</a></li>
                            <li> <a class="waves-effect waves-light" href="timeline.html">Timeline</a></li>
                            <li> <a class="waves-effect waves-light" href="carousel.html">Carousel</a></li>
                        </ul>
                    </li>
                    <li><a  class="waves-effect waves-light"><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="general_elements.html">General Elements</a></li>
                            <li><a class="waves-effect waves-light" href="form_input.html">Form Input</a></li>
                            <li><a class="waves-effect waves-light" href="form_validation.html">Form Validation</a></li>
                            <li><a class="waves-effect waves-light" href="form_mask.html">Form Mask</a></li>
                            <li><a class="waves-effect waves-light" href="form_layouts.html">Form Layouts</a></li>
                            <li><a class="waves-effect waves-light" href="form_wizard.html">Form Wizard</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-window-maximize"></i>Popups <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="sweetalerts.html">Popups</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="basic_table.html">Basic Table</a></li>
                            <li><a class="waves-effect waves-light" href="edit_table.html">Edit Table</a></li>
                            <li><a class="waves-effect waves-light" href="basic_datatable.html">Basic Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="advanced_datatable.html">Advanced Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="api_datatable.html">API Datatable</a></li>
                            <li><a class="waves-effect waves-light" href="styling_datatable.html">Styling Datatable</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-bar-chart-o"></i> Charts <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="morris_chart.html">Morris Chart</a></li>
                            <li><a class="waves-effect waves-light" href="sparkline_chart.html">Sparkline Chart</a></li>
                            <li><a class="waves-effect waves-light" href="chartist_chart.html">Chartist</a></li>
                            <li><a class="waves-effect waves-light" href="chart_js.html">Chart.js</a></li>
                            <li><a class="waves-effect waves-light" href="easy_pie_chart.html">Easy Pie Chart</a></li>
                            <li><a class="waves-effect waves-light" href="rickshaw_chart.html">Rickshaw Chart</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu_section">
                <h3>Live On</h3>
                <ul class="nav side-menu">
                    <li><a class="waves-effect waves-light"><i class="fa fa-anchor"></i> Icons <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="font_awesome.html">Font awesome</a></li>
                            <li><a class="waves-effect waves-light" href="material_icon.html">Material icon</a></li>
                            <li><a class="waves-effect waves-light" href="themify_icon.html">Themify icon</a></li>
                            <li><a class="waves-effect waves-light" href="flag_icon.html">Flag icon</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-map-marker"></i> Maps <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="map-google.html">Google Maps</a></li>
                            <li><a class="waves-effect waves-light" href="map-vector.html">Vector Map</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-user-circle-o"></i> User Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_login_v1.html">Login 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_login_v2.html">Login 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v1.html">Register 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_register_v2.html">Register 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v1.html">Forgot 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_forgot_password_v2.html">Forgot 2</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v1.html">Lockscreen 1</a></li>
                            <li><a class="waves-effect waves-light" href="user_lockscreen_v2.html">Lockscreen 2</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-exclamation-circle"></i> Error Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="user_404.html">Error 404</a></li>
                            <li><a class="waves-effect waves-light" href="user_400.html">Error 400</a></li>
                            <li><a class="waves-effect waves-light" href="user_403.html">Error 403</a></li>
                            <li><a class="waves-effect waves-light" href="user_405.html">Error 405</a></li>
                            <li><a class="waves-effect waves-light" href="user_500.html">Error 500</a></li>
                            <li><a class="waves-effect waves-light" href="user_503.html">Error 503</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-balance-scale"></i> General Pages <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li><a class="waves-effect waves-light" href="faq.html">FAQ</a></li>
                            <li><a class="waves-effect waves-light" href="userlist.html">User List</a></li>
                            <li><a class="waves-effect waves-light" href="invoice.html">Invoice</a></li>
                            <li><a class="waves-effect waves-light" href="blank.html">Blank</a></li>
                            <li><a class="waves-effect waves-light" href="profile.html">Profile</a></li>
                            <li><a class="waves-effect waves-light" href="gallery.html">Gallery</a></li>
                            <li><a class="waves-effect waves-light" href="maintenance.html">Maintenance</a></li>
                            <li><a class="waves-effect waves-light" href="draggable_grid.html">Draggable Grid</a></li>
                            <li><a class="waves-effect waves-light" href="grids.html">Grids</a></li>
                            <li><a class="waves-effect waves-light" href="search_results.html">Search result</a></li>
                        </ul>
                    </li>
                    <li><a class="waves-effect waves-light"><i class="fa fa-cogs"></i>Documentation <span
                                    class="fa fa-chevron-right"></span></a>
                        <ul class="nav child_menu">
                            <li> <a class="waves-effect waves-light" href="documentation.html">Documentation</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
        <!-- /sidebar menu -->

    </div>
</div>
<!-- End Left Menu -->

<!-- start top navigation -->
<div class="top_nav">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                <div class="responsive-logo">
                    <a href="index.html">
                        <img src="../../assets/global/images/prince_logo.png" alt="main-logo">
                    </a>
                </div>
            </div>

            <div class="topbar-right">
                <div class="nav navbar-nav navbar-right">

                    <div class="header-search right-icon">
                        <form role="search" class="search-box">
                            <input placeholder="Search..." class="form-control" type="text">
                            <a href="javascript:">
                                <i class="fa fa-search"></i>
                            </a>
                        </form>
                    </div>

                    <div class="dropdown header-notification right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light notification-icon"
                           data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-bell-o" aria-hidden="true"></i>
                            <span class="label label-danger">4</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="text-center">
                                <p class="notification-title">Notification<span
                                            class="label label-primary">4</span></p>
                            </li>
                            <li class="list-group default-scroll">
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user1.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Domance Den</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user2.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Wikko Menta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user3.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jonny Sem</span> posted 4 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user4.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Doli Senga</span> posted a photo on
                                                your wall.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user5.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Bhura Kenta</span> commented on your
                                                last video.</h5>
                                        </div>
                                    </div>
                                </a>
                                <a href="javascript:;" class="list-group-item">
                                    <div class="media">
                                        <div class="pull-left">
                                            <img src="../../assets/global/images/user6.jpg" alt="user">
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading"><span>Jolly Baby</span> posted 2 comments
                                                on your photo.</h5>
                                        </div>
                                    </div>
                                </a>

                            </li>
                            <li class="all-notification">
                                <a href="javascript:;" class="list-group-item text-right">
                                    <small>See all notifications</small>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="header-fullscreen right-icon">
                        <a href="javascript:" class="waves-effect waves-light toggle-fullscreen">
                            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                    </div>

                    <!--<div class="header-chat right-icon">
                        <a href="javascript:" class="waves-effect waves-light">
                            <i class="fa fa-comments-o" aria-hidden="true"></i>
                        </a>
                    </div>-->

                    <div class="dropdown user-profile right-icon">
                        <a href="javascript:" class="dropdown-toggle waves-effect waves-light"
                           data-toggle="dropdown"
                           aria-expanded="false">
                            <img src="../../assets/global/images/user10.jpg" alt="user">
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-user" aria-hidden="true"></i>Profile</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-cog" aria-hidden="true"></i>Settings</a>
                            </li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-lock" aria-hidden="true"></i>Lock screen</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:" class="waves-effect waves-light">
                                    <i class="fa fa-power-off text-danger" aria-hidden="true"></i> Logout</a>
                            </li>
                        </ul>
                    </div>

                </div>

            </div>
        </nav>
    </div>
</div>
<div class="clearfix"></div>
<!-- End top navigation -->
            <!-- End header -->
            <!-- Start Contain Section -->
            <div class="container-fluid right_color">
                <div class="page-main-header">
                    <!-- Page Title -->
                    <h2 class="page-name-title">List</h2>
                    <!--  Breadcrumb -->
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li class="text-info">Components</li>
                        <li class="active">List</li>
                    </ol>
                </div>

                <div class="contain-section button-page-section">
                    <div class="contain-inner-section">
                        <!-- Start container -->
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>Basic list</h2>
                                    <p>The most basic list group is simply an unordered list with list items, and the proper classes.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">Cras justo odio</li>
                                        <li class="list-group-item">Dapibus ac facilisis in</li>
                                        <li class="list-group-item">Morbi leo risus</li>
                                        <li class="list-group-item">Porta ac consectetur ac</li>
                                        <li class="list-group-item">Vestibulum at eros</li>
                                    </ul>
                                </div>

                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>Badges list</h2>
                                    <p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <span class="badge badge-primary">10</span>
                                            Cras justo odio
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge badge-success">9</span>
                                            Dapibus ac facilisis in
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge badge-info">4</span>
                                            Morbi leo risus
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge badge-danger">14</span>
                                            Porta ac consectetur ac
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge">5</span>
                                            Vestibulum at eros
                                        </li>
                                    </ul>
                                </div>

                            </div>

                            <div class="clearfix visible-md-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>Linked list</h2>
                                    <p>Linkify list group items by using anchor tags instead of list items.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group">
                                        <li class="list-group-item active">
                                            Cras justo odio
                                        </li>
                                        <li class="list-group-item">Dapibus ac facilisis in</li>
                                        <li class="list-group-item">Morbi leo risus</li>
                                        <li class="list-group-item">Porta ac consectetur ac</li>
                                        <li class="list-group-item">Vestibulum at eros</li>
                                    </ul>
                                </div>

                            </div>

                            <div class="clearfix visible-lg-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>Disabled items</h2>
                                    <p>Add <code>.disabled</code> to a <code>.list-group-item</code> to gray it out to appear disabled.</p>
                                </div>
                                <div class="section-body">
                                    <div class="list-group">
                                        <a class="list-group-item disabled">
                                            Cras justo odio
                                        </a>
                                        <a class="list-group-item">Dapibus ac facilisis in</a>
                                        <a class="list-group-item">Morbi leo risus</a>
                                        <a class="list-group-item">Porta ac consectetur ac</a>
                                        <a class="list-group-item">Vestibulum at eros</a>
                                    </div>
                                </div>

                            </div>

                            <div class="clearfix visible-md-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>Contextual classes</h2>
                                    <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group">
                                        <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
                                        <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
                                        <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
                                        <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
                                    </ul>
                                </div>

                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>Custom content</h2>
                                    <p>Add nearly any HTML within, even for linked list groups like the one below.</p>
                                </div>
                                <div class="section-body">
                                    <div class="list-group custom-content">
                                        <a class="list-group-item active">
                                            <h4 class="list-group-item-heading">List group item heading</h4>
                                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                                        </a>
                                        <a class="list-group-item">
                                            <h4 class="list-group-item-heading">List group item heading</h4>
                                            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                                        </a>
                                    </div>
                                </div>

                            </div>

                            <div class="clearfix visible-lg-block visible-md-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>List group with right icons</h2>
                                    <p>List group items by using right icons instead of list items.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group list-group-right-icon">
                                        <li class="list-group-item active">Cras justo odio<span class="icon-right"><i class="icon icon_paperclip"></i></span></li>
                                        <li class="list-group-item">Dapibus ac facilisis in<span class="icon-right"><i class="icon icon_genius"></i></span></li>
                                        <li class="list-group-item">Morbi leo risus<span class="icon-right"><i class="icon icon_link"></i></span></li>
                                        <li class="list-group-item">Porta ac consectetur ac<span class="icon-right"><i class="icon icon_like"></i></span></li>
                                        <li class="list-group-item">Vestibulum at eros<span class="icon-right"><i class="icon icon_heart_alt"></i></span></li>
                                    </ul>
                                </div>

                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>List group with left icons</h2>
                                    <p>List group items by using left icons instead of list items.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group list-group-left-icon">
                                        <li class="list-group-item active"><span class="icon-left"><i class="icon icon_paperclip"></i></span>Cras justo odio</li>
                                        <li class="list-group-item"><span class="icon-left"><i class="icon icon_genius"></i></span>Dapibus ac facilisis in</li>
                                        <li class="list-group-item"><span class="icon-left"><i class="icon icon_link"></i></span>Morbi leo risus</li>
                                        <li class="list-group-item"><span class="icon-left"><i class="icon icon_like"></i></span>Porta ac consectetur ac</li>
                                        <li class="list-group-item"><span class="icon-left"><i class="icon icon_heart_alt"></i></span>Vestibulum at eros</li>
                                    </ul>
                                </div>

                            </div>

                            <div class="clearfix visible-md-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>List group with background</h2>
                                    <p>Use different types of background color of list items.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group list-group-background">
                                        <li class="list-group-item">Cras justo odio</li>
                                        <li class="list-group-item">Dapibus ac facilisis in</li>
                                        <li class="list-group-item">Morbi leo risus</li>
                                        <li class="list-group-item">Porta ac consectetur ac</li>
                                        <li class="list-group-item">Vestibulum at eros</li>
                                    </ul>
                                </div>

                            </div>

                            <div class="clearfix visible-lg-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>User list</h2>
                                    <p>Use different types of user list groups with image.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group user-list">
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user1.jpg" alt="user image">
                                            <h4>Cras justo odio</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user2.jpg" alt="user image">
                                            <h4>Dapibus ac facilisis</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user3.jpg" alt="user image">
                                            <h4>Morbi leo risus</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user4.jpg" alt="user image">
                                            <h4>Porta ac consectetur</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user5.jpg" alt="user image">
                                            <h4>Vestibulum at eros</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                    </ul>
                                </div>

                            </div>

                            <div class="clearfix visible-md-block"></div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>User list with circle</h2>
                                    <p>Use different types of user list groups with circle image.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group user-list user-list-cicle">
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user6.jpg" alt="user image">
                                            <h4>Cras justo odio</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user7.jpg" alt="user image">
                                            <h4>Dapibus ac facilisis</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user8.jpg" alt="user image">
                                            <h4>Morbi leo risus</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user9.jpg" alt="user image">
                                            <h4>Porta ac consectetur</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                        <li class="list-group-item">
                                            <img src="../../assets/global/images/user10.jpg" alt="user image">
                                            <h4>Vestibulum at eros</h4>
                                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing commodo.</p>
                                        </li>
                                    </ul>
                                </div>

                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">

                                <div class="section-header">
                                    <h2>List notifications</h2>
                                    <p>Use different types of notification list groups with icons.</p>
                                </div>
                                <div class="section-body">
                                    <ul class="list-group notifications-list">
                                        <li class="list-group-item">
                                            <i class="fa fa-user text-primary"></i>
                                            <h4>Porta ac consectetur</h4>
                                            <p>Just now online</p>
                                        </li>
                                        <li class="list-group-item">
                                            <i class="fa fa-envelope text-info"></i>
                                            <h4>Vestibulum at eros</h4>
                                            <p>6 minits ago</p>
                                        </li>
                                        <li class="list-group-item">
                                            <i class="fa fa-share-alt text-success"></i>
                                            <h4>Cras justo odio</h4>
                                            <p>10 minits ago</p>
                                        </li>
                                        <li class="list-group-item">
                                            <i class="fa fa-times-circle text-danger"></i>
                                            <h4>Dapibus ac facilisis</h4>
                                            <p>5 Days ago</p>
                                        </li>
                                        <li class="list-group-item">
                                            <i class="fa fa-cogs text-warning"></i>
                                            <h4>Morbi leo risus</h4>
                                            <p>1 Month ago</p>
                                        </li>
                                    </ul>
                                </div>

                            </div>

                        </div>
                        <!-- End container -->
                    </div>
                </div>

            </div>
            <!-- End Contain Section -->    <!-- Start Footer Section -->    <footer class="footer">        © 2018 All rights reserved. Template designed by <a class="text-primary" href="http://www.bootstrapmb.com/">Prince</a>    </footer>    <!-- End Footer Section -->
        </div>
    </div>

        <!-- Start core js -->
        <script src="../../assets/global/plugins/jquery/dist/jquery.min.js"></script>
        <script src="../../assets/global/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../../assets/global/plugins/Waves/dist/waves.min.js"></script>
        <script src="../../assets/global/plugins/screenfull.js/dist/screenfull.min.js"></script>
        <script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
        <!-- Start core javascript -->

        <!-- Start global js -->
        <script src="../../assets/global/js/left-icon-menu.min.js"></script>
        <!-- End global js -->

    </body>
</html>